<template>
    <div class="app-container">
        <div class="tcl">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <div style="padding: 20px 100px">
                        <el-descriptions class="margin-top" size="medium" :column="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    供应商名称
                                </template>
                                {{ this.h_name }}
                                <el-tag size="small" style="margin-left: 10px;" v-if="this.f_state==1&&this.zrid1==0" type="success">合格</el-tag>
                                <el-tag size="small" style="margin-left: 10px;" v-if="this.f_state==2&&this.zrid1==0" type="danger">不合格</el-tag>
                                <el-tag size="small" style="margin-left: 10px;" v-if="this.f_state==3&&this.zrid1==0" type="info">黑名单</el-tag>
                                <el-tag size="small" style="margin-left: 10px;" v-if="this.f_status==2&&this.zrid1!=0" type="danger">已驳回</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    统一社会信用代码
                                </template>
                                {{ this.h_credit_code }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    单位注册地
                                </template>
                                {{ this.h_incorporation }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    机构类型
                                </template>
                                <span v-if="this.h_institution==null" style="color: #cccccc">待填写</span>
                                <el-tag size="small" v-else>{{ this.h_institution }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    企业性质
                                </template>
                                <span v-if="this.h_quality==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_quality }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    成立日期
                                </template>
                                {{ this.h_start_time }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    法人/负责人
                                </template>
                                {{ this.h_juridical }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    法人/负责人身份证号
                                </template>
                                {{ this.h_juridical_identity }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    单位联系地址
                                </template>
                                <span v-if="this.h_address==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_address }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    公司简介
                                </template>
                                <span v-if="this.h_desc==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_desc }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    营业执照扫描件
                                </template>
                                <div class="demo-image__preview">
                                    <el-image style="width: 100px; height: 100px;" fit="contain" :src="h_copies" :preview-src-list="h_copies_list"></el-image>
                                </div>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    法人/负责人身份证扫描件
                                </template>
                                <div class="demo-image__preview">
                                    <el-image style="width: 100px; height: 100px;" fit="contain" :src="idCardCopy" :preview-src-list="idCardCopyList"></el-image>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>

                    </div>
                    <!-- 开户行 -->
                    <div style="padding: 0 100px; text-align: center;">
                        <p style="color: red; font-size: 12px;text-align: left;">注: 开票信息专用</p>
                        <el-descriptions class="margin-top" size="medium" :column="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    开户行
                                </template>
                                <span v-if="this.h_bank==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_bank }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    银行账号
                                </template>
                                <span v-if="this.h_account==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_account }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    开户行地址
                                </template>
                                <span v-if="this.h_bank_address==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_bank_address }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    单位注册电话
                                </template>
                                <span  v-if="this.h_sign_phone==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_sign_phone }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    注册资本（万元）
                                </template>
                                <span v-if="this.h_capital==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_capital }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    实缴资本（万元）
                                </template>
                                <span v-if="this.h_actual_capital==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_actual_capital }}</span>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-form style="margin-top: 20px" lable-width="80px">
                            <el-form-item label="审核意见">
                                <el-input type="textarea" v-model="this.opinion" :readonly="true"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-row>
                            <el-button @click="cancle" >返回</el-button>
                        </el-row>
                    </div>
                </el-tab-pane>
                <!-- 业务经办人信息 -->
                <el-tab-pane label="业务经办人信息" name="second">
                    <div style="padding: 20px 100px;">
                        <el-descriptions class="margin-top" size="medium" :colum="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    姓名
                                </template>
                                {{ this.operator.yw_name }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    身份证号
                                </template>
                                {{ this.operator.yw_idcrad }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    手机号
                                </template>
                                {{ this.operator.yw_phone }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    邮箱
                                </template>
                                {{ this.operator.yw_mailbox }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    身份证扫描件
                                </template>
                                <div class="demo-image__preview">
                                    <el-image style="width: 100px; height: 100px;" fit="contain" :src="yw_idcrad_copy" :preview-src-list="yw_idcrad_copy_list"></el-image>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                    <div style="text-align: center;padding: 0 100px">
                    <el-row>
                        <el-button @click="cancle">返回</el-button>
                    </el-row>
                    </div>
                </el-tab-pane>
                <!-- 核心技术人员 -->
                <el-tab-pane label="核心技术人员" name="third">
                    <div style="padding: 20px 100px;">
                        <el-table stripe v-loading="loading"  :data="personnelList">
                            <el-table-column type="index" label="序号" align="center" width="80"/>
                            <el-table-column label="姓名" align="center" prop="js_name"/>
                            <el-table-column label="职位" align="center" prop="js_education"/>
                            <el-table-column label="学历" align="center" prop="js_position"/>
                            <el-table-column label="职称" align="center" prop="js_title"/>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                    <el-button
                                        size="small"
                                        type="text"
                                        @click="handleUpdate(scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button
                                        size="small"
                                        type="text"
                                        @click="handleDelete(scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination
                            v-show="total>0"
                            :total="total"
                            :page.sync="personnel.pageNum"
                            :limit.sync="personnel.pageSize"
                            @pagination="personnelList"
                        />
                    <!-- 隐藏的添加和修改核心技术人员对话框 -->
                        <el-dialog title="编辑" width="500ox" append-to-body :visible.sync="open">
                            <el-form ref="form" label-width="80px" :rules="rules" :model="form">
                                <el-form-item label="姓名" prop="js_name">
                                    <el-input v-model="form.js_name" placeholder="请输入姓名"/>
                                </el-form-item>
                                <el-form-item label="职位" prop="js_education">
                                    <el-input v-model="form.js_education" placeholder="请输入职位"/>
                                </el-form-item>
                                <el-form-item label="学历" prop="js_position">
                                    <el-input v-model="form.js_position" placeholder="请输入学历"/>
                                </el-form-item>
                                <el-form-item label="职称" prop="js_title">
                                    <el-input v-model="form.js_title" placeholder="请输入职称"/>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button type="primary" @click="submitForm">确定</el-button>
                                <el-button @click="qx">取消</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <div style="text-align: center;padding: 0 100px;">
                        <el-row>
                            <el-button @click="cancle">返回</el-button>
                        </el-row>
                    </div>
                </el-tab-pane>
                <!-- 企业资质 -->
                <el-tab-pane label="企业资质" name="fourth">
                    <div style="padding: 20px 100px;">
                        <el-table stripe v-loading="loading" :data="enterpriseList">
                            <el-table-column type="index" label="序号" align="center" width="80"/>
                            <el-table-column label="证书名称" align="center" prop="zz_cert_name"/>
                            <el-table-column label="证书编号" align="center" prop="zz_cert_no"/>
                            <el-table-column label="发证单位" align="center" prop="zz_unit"/>
                            <el-table-column label="发证日期" align="center" prop="zz_date"/>
                            <el-table-column label="有效期至" align="center" prop="zz_expiration_date"/>
                        </el-table>
                        <pagination
                        v-show="total1>0"
                        :total="total1"
                        :page.sync="enterprise.pageNum"
                        :limit.sync="enterprise.pageSize"
                        @pagination="enterpriseList"
                        />
                    </div>
                    <div style="text-align: center;padding: 0 100px;">
                        <el-row>
                            <el-button @click="cancle">返回</el-button>
                        </el-row>
                    </div>
                </el-tab-pane>
                <!-- 业绩 -->
                <el-tab-pane label="业绩" name="fifth">
                <div style="padding: 20px 100px;">
                    <el-table stripe v-loading="loading" :data="achievementList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="采购单位" align="center" prop="yj_unit"/>
                        <el-table-column label="合作方" align="center" prop="yj_partner"/>
                        <el-table-column label="签订日期" align="center" prop="yj_date"/>
                        <el-table-column label="合同金额（万元）" align="center" prop="yj_rmb"/>
                        <el-table-column label="买方业务代表" align="center" prop="yj_bbr"/>
                        <el-table-column label="买方业务代表联系电话" align="center" prop="yj_phone"/>
                    </el-table>
                    <pagination
                        v-show="total2>0"
                        :total="total2"
                        :page.sync="achievement.pageNum"
                        :limit.sync="achievement.pageSize"
                        @pagination="achievementList"
                    />
                </div>
                <div style="text-align: center;padding: 0 100px;">
                    <el-row>
                        <el-button @click="cancle">返回</el-button>
                    </el-row>
                </div>
            </el-tab-pane>
            <!-- 财务状态 -->
            <el-tab-pane label="财务状态" name="sixth">
                <div style="padding: 20px 100px;">
                    <el-table stripe v-loading="loading" :data="financialStatusList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="年度" align="center" prop="c_annual"/>
                        <el-table-column label="合作方" align="center" prop="c_net_profit"/>
                        <el-table-column label="资产负债率（%）" align="center" prop="c_lev"/>
                    </el-table>
                    <pagination
                        v-show="total3>0"
                        :total="total3"
                        :page.sync="financialStatus.pageNum"
                        :limit.sync="financialStatus.pageSize"
                        @pagination="financialStatusList"
                    />
                </div>
                <div style="text-align: center;padding: 0 100px;">
                    <el-row>
                        <el-button @click="cancle">返回</el-button>
                    </el-row>
                </div>
            </el-tab-pane>
            <!-- 相关附件 -->
            <el-tab-pane label="相关附件" name="seventh">
                <div style="padding: 20px 100px;">
                    <el-table stripe v-loading="loading" :data="accessoriesList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="名称" align="center" prop="fj_name"/>
                        <el-table-column label="附件" align="center" >
                            <template slot-scope="scope">
                                <p v-if="scope.row.fj_annex != null">
                                    <a v-for="i in JSON.parse(scope.row.fj_annex)" :key="i.url" :href="i.url" target="_blank">{{ i.name }}</a>
                                </p>
                                <p v-if="scope.row.fj_annex == null" style="color: #409EFF">---</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" v-if="scope.row.fj_annex!=null" @click="download(JSON.parse(scope.row.fj_annex))">
                                下载附件<i class="el-icon-download"></i>
                                </el-button>
                                <p v-if="scope.row.fj_annex==null" style="color: #409EFF">---</p>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="total4>0"
                        :total="total4"
                        :page.sync="accessories.pageNum"
                        :limit.sync="accessories.pageSize"
                        @pagination="accessoriesList"
                    />
                </div>
                <div style="text-align: center;padding: 0 100px">
                    <el-row>
                    <el-button @click="cancle">返回</el-button>
                    </el-row>
                </div>
            </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import{
    getSupplierByZrId,
    getSupplier
}from '@/api/system/supplier'
import {getOperator} from "@/api/system/operator";
import {listPersonnel,updatePersonnel,delPersonnel,getPersonnel} from "@/api/system/personnel";
import {listEnterprise} from "@/api/system/enterprise";
import {listAchievement} from "@/api/system/achievement";
import {listStatus} from "@/api/system/financialStatus";
import {listAccessories} from "@/api/system/accessories";

import {getToken} from "@/utils/auth"

export default{
    components: {},
    name: "detail",
    data(){
        return{
            open: false,
            loading: true,
            hid: this.$route.query.hid,
            zrid1: this.$route.query.zr_id,
            activeName: 'first',
            opinion: null,
            zr_id: 0,
            h_name: null,
            h_credit_code: null,
            h_incorporation: null,
            h_institution: null,
            h_quality: null,
            h_start_time: null,
            h_juridical: null,
            h_juridical_identity: null,
            h_address: null,
            h_range: null,
            h_desc: null,
            h_juridical_copies: null,
            h_expiration: null,
            h_bank: null,
            h_account: null,
            h_bank_address: null,
            h_sign_phone: null,
          //  h_sign_address: null,
            h_capital: null,
            h_actual_capital: null,
            h_prove: null,
            f_status: null,
        //    f_opinion: null,
            f_state: null,
         //   f_classify: null,
        //    h_loginaccount: null,
        //    h_password: null,
            //核心技术人员
            personnelList: [],
            //企业资质列表
            enterpriseList: [],
            //业绩
            achievementList: [],
            //财务状态
            financialStatusList: [],
            //相关附件
            accessoriesList: [],
            //营业执照
            h_copies: '',
            h_copies_list: [],
            //法人身份证
            idCardCopy: '',
            idCardCopyList: [],
            //业务经办人身份证
            yw_idcrad_copy: '',
            yw_idcrad_copy_list: [],
            //业务经办人
            operator: {
                yw_name: null,
                yw_phone: null,
                yw_idcrad: null,
                yw_mailbox: null,
                yw_scan_idcard: null,
            },
            //核心技术人员
            total: 0,
            personnel: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //企业资质
            total1: 0,
            enterprise: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //业绩
            total2: 0,
            achievement: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //财务状态
            total3: 0,
            financialStatus: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //相关附件
            total4: 0,
            accessories: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //表单参数
            form: {},
            //表单验证
            rules: {},
            //上传参数
            upload:{
                fileList: [],
                isUploading: false,
                headers: {
                    Authorization: "Bearer"+getToken()
                },
                url: process.env.VUE_APP_BASE_API+"/supplier/supplier/upload1",
            }
        }
    },created(){

        this.query()
    },watch:{
        '$route.query.hid': function(newHid,oldHid){
            if(newHid!=oldHid){
                this.hid=newHid;
                this.personnel.hid=newHid;
                this.enterprise.hid=newHid;
                this.achievement.hid=newHid;
                this.financialStatus.hid=newHid;
                this.accessories.hid=newHid;
                this.query()
            }
        }
    },methods:{
        // 获取附件名称
        getAccessoryName(url) {
            const urlParts = url.split('/')
            const fileName = urlParts[urlParts.length - 1]
            return fileName
        },
        download(annex){
            annex.forEach(response => {
                // 创建一个 URL 对象
                const url = window.URL.createObjectURL(new Blob([response.data]));
                // 创建一个链接元素
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'files.zip'); // 设置下载文件的名称
                document.body.appendChild(link);
                link.click(); // 触发下载
                link.remove(); // 下载后移除链接
            })
        },

        handleClick(tab,event){
            console.log(tab,event);
        },
        cancle(){
            this.$router.back()
        },
        handleDelete(row){
            const jsIds=row.js_id
            this.$modal.confirm('是否确认删除该核心人员技术的数据项？').then(function(){
                return delPersonnel(jsIds);
            }).then(()=>{
                this.query();

                this.$modal.msgSuccess("删除成功");
            }).catch(()=>{
            });
        },
        submitForm(){
            this.$refs["form"].validate(valid=>{
                if(valid){
                    updatePersonnel(this.form).then(response=>{
                        this.$modal.msgSuccess("修改成功");
                        this.open=false;
                        this.query();
                    })
                }
            })
        },
        reset(){
            this.form={
                js_id: null,
                js_name: null,
                js_education: null,
                js_position: null,
                js_title: null,
            }
            this.resetForm("form");
        },
        qx(){
            this.open=false;
            this.reset();
        },
        handleUpdate(row){
            this.reset()
            getPersonnel(row.js_id).then(response=>{
                this.form=response.data
                this.open=true
            })
        },
        yang(response){
            this.opinion=response.data.f_opinion
            this.h_name=response.data.h_name
            this.h_credit_code=response.data.h_credit_code
            this.h_incorporation=response.data.h_incorporation
            this.h_institution=response.data.h_institution
            this.h_quality=response.data.h_quality
            this.h_start_time=response.data.h_start_time
            this.h_juridical=response.data.h_juridical
            this.h_juridical_identity=response.data.h_juridical_identity
            this.h_address=response.data.h_address
            this.h_desc=response.data.h_desc
            this.h_bank=response.data.h_bank
            this.h_bank_address=response.data.h_bank_address
            this.h_sign_phone=response.data.h_sign_phone
            this.h_capital=response.data.h_capital
            this.h_actual_capital=response.data.h_actual_capital
            this.h_account=response.data.h_account
            this.f_state=response.data.f_state
            this.f_status=response.data.f_status
            this.h_copies=response.data.h_copies
            this.h_copies_list=response.data.h_copies
            this.idCardCopy=response.data.h_juridical_copies
            this.idCardCopyList=response.data.h_juridical_copies
        },
        query(){
            if(this.zrid1==0){
                getSupplier(this.hid).then(response=>{
                    this.yang(response)
                    this.infos()
                })
            }else{
                getSupplierByZrId(this.zrid1).then(response=>{
                    this.$router.replace({query:{...this.$route.query,hid:response.data.hid}});
                    this.yang(response)
                    this.infos()
                })
            }
        },
        infos(){
            //业务经办人
            getOperator(this.hid).then(response=>{
                this.operator.yw_name= response.data.yw_name
                this.operator.yw_phone=response.data.yw_phone
                this.operator.yw_idcrad=response.data.yw_idcrad
                this.operator.yw_mailbox=response.data.yw_mailbox
                this.yw_idcrad_copy=response.data.yw_scan_idcard
                this.yw_idcrad_copy_list=response.data.yw_idcrad_copy
            })
            //核心技术人员
            listPersonnel(this.personnel).then(response=>{
                this.personnelList=response.rows;
                console.log(this.personnelList,"核心技术人员")
                this.total=response.total;
            })
            //企业资质
            listEnterprise(this.enterprise).then(response=>{
                this.enterpriseList=response.rows;
                console.log(this.enterpriseList,"企业资质")
                this.total1=response.total;
            })
            //业绩
            listAchievement(this.achievement).then(response=>{
                this.achievementList=response.rows;
                console.log(this.achievementList,"业绩")
                this.total2=response.total;
            })
            //财务状态
            listStatus(this.financialStatus).then(response=>{
                this.financialStatusList=response.rows;
                console.log(this.financialStatusList,"财务状态")
                this.total3=response.total;
            })
            //相关附件
            listAccessories(this.accessories).then(response=>{
                this.accessoriesList = response.rows.map(item => {
                    const url = item.fj_annex
                    const name = url.split('/').pop()
                    console.log(url,"******************");
                    console.log(name,"---------------------");

                    return {
                        ...item,
                        fj_annex: JSON.stringify([{ url, name }])
                    }
                })
                console.log(this.accessoriesList, "相关附件")
                this.total4 = response.total
            })
            this.loading=false
        },
        submitUpload(){
            this.$refs.upload.subunit();
        },
        handleFileUploadProgress(event,file,fileList){
            this.upload.isUploading=true;
        },
        handleFileSuccess(response,file,fileList){
            console.log(response)
            this.upload.isUploading=false
            this.$message.success(response.msg);
        },
        beforeRemove(file,fileList){
            return this.$confirm(`确定移除 ${file.name}?`);
        },
        beforeUpload(file){
            const isLt5M = file.size /1024/1024<5;
            if(!isLt5M){
                this.$$message.error('文件大小不能超过5MB')
            }
            return isLt5M;
        },
        // 文件提交处理
        submitUpload() {
            this.$refs.upload.submit();
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            console.log(response)
            this.upload.isUploading = false;
            //this.form.filePath = response.url;
            this.$message.success(response.msg);

        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        beforeUpload(file) {
            const isLt5M = file.size / 1024 / 1024 < 5;

            if (!isLt5M) {
                this.$message.error('文件大小不能超过5MB');
            }
            return isLt5M;
        }
    }
}
</script>
